<template>
  <el-row class="content" v-if="totalFlash">
    <el-col :span="3" class="right-line tree-container mytree">
      <!-- <el-input
        placeholder="查询"
        size="small"
        style="margin: 0 12px 8px 0; width: 95%"
      ></el-input> -->
      <el-tree
        :indent="0"
        class="big-font-tree tree"
        ref="tree"
        :default-expand-all="defaultExpandAll"
        :draggable="draggable"
        :highlight-current="highlightCurrent"
        :accordion="accordion"
        :data="tree"
        :props="prop"
        node-key="id"
        :default-expanded-keys="defaultExpandKeys"
        @node-click="nodeClick"
      >
        <span slot-scope="{ node, data }">
          <img :src="data.uu" class="imgColor" />
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-col>
    <el-col :span="21">
      <component
        :is="currentComponent"
        :node="currentNodeData"
        :current-id="currentId"
        :tree-node="currentNode"
        :leaf-node="currentLeafNode"
        :tree="$refs.tree"
        v-if="flushStatus"
        keep-alive
      ></component>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "TextTree",
  props: {
    defaultExpandKeys: {
      type: Array,
      default: () => [1],
      require: false,
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
      require: false,
    },
    tree: {
      type: Array,
      default() {
        return [];
      },
    },
    prop: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
          defaultExpand: "default",
        };
      },
    },
    imports: {
      type: Object,
      default() {
        return {};
      },
    },
    draggable: {
      type: Boolean,
      default: false,
    },
    highlightCurrent: {
      type: Boolean,
      default: true,
    },
    accordion: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentNode: null,
      currentId: -1,
      currentComponent: null,
      currentTreeNode: null,
      currentLeafNode: null,
      currentNodeData: null,
      flushStatus: true,
      totalFlash: true,
    };
  },
  mounted() {
    if (this.tree) {
      this.expandRoot();
      this.expandDefault();
    }

    // this.$nextTick().then(() => {
    //   let int = setInterval(() => {
    //     if (document.querySelector('.el-tree-node') !== null) {
    //       console.log(document.querySelector('.el-tree-node__children'))
    //       let kk = document.querySelector('.el-tree-node__children').getElementsByClassName('el-tree-node')[1].click()
    //       clearInterval(int)
    //     }
    //   })
    // })
  },
  methods: {
    expandRoot() {
      if (this.$refs.tree.root.childNodes) {
        this.$refs.tree.root.expanded = true;
        if (
          this.$refs.tree.root.childNodes.length === 1 &&
          this.$refs.tree.root.childNodes[0].data
        )
          this.$refs.tree.root.childNodes.forEach(
            (node) =>
              (node.expanded = node.data[this.prop.defaultExpand] !== false)
          );
      }
    },
    nodeClick(d, node, tree) {
      if (this.currentId !== node.id) {
        if (this.currentNode) this.currentNode.isCurrent = false;
        this.currentNode = node;
        node.isCurrent = true;
        if (!d.children) {
          this.currentId = node.id;
          this.currentLeafNode = node;
          this.currentNodeData = d;
          this.changeComponent(d.component);
          this.$emit("leaf-click", d, node, tree);
        }
        this.$emit("node-click", d, node, tree);
      }
    },
    expandDefault(arr) {
      if (arr) {
        arr.forEach((node) => {
          if (node.data && node.data.default !== undefined) {
            if (node.isLeaf) {
              this.nodeClick(node.data, node, this.$refs.tree);
            } else {
              node.expanded = node.data.default;
            }
          }
          if (this.currentNode === null && node.isLeaf)
            this.nodeClick(node.data, node, this.$refs.tree);
          if (node.childNodes) this.expandDefault(node.childNodes);
        });
      } else if (this.$refs.tree.root.childNodes) {
        this.expandDefault(this.$refs.tree.root.childNodes);
      }
    },
    changeComponent(component) {
      if (component) {
        if (this.imports.hasOwnProperty(component)) {
          this.currentComponent = this.imports[component];
        } else {
          this.currentComponent = component;
        }
        this.flushStatus = false;
        this.$nextTick(() => {
          this.flushStatus = true;
        });

        this.$emit("component-change", this.currentComponent);
      } else {
        this.$emit("change-error", component);
      }
    },
  },
  watch: {
    tree(value) {
      if (value && value.length) {
        this.$nextTick(() => {
          this.expandRoot();
          this.expandDefault();
        });
      }
    },
    deptTreeData() {
      // if (val) {
      console.log(document.querySelector(".el-tree-node__content"));
      // this.$nextTick(() => {
      //   document.querySelector('.el-tree-node__content').click()
      // })
      // }
    },
  },
  created() {
    // this.$refs.tree.setCurrentKey(1)
  },
};
</script>

<style scoped lang="less">
.mytree {
  height: 90.5vh;
  font-size: 16px;
  width: 200px;
  overflow-x: hidden;
}
.imgColor {
  height: 16px;
  width: 14px;
  margin-left: 5px;
}
.el-tree {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 5px;
}
.mytree .el-tree > .el-tree-node:after {
  border-top: none;
}
.mytree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
}
.mytree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}
.mytree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.mytree /deep/.el-tree-node :last-child:before {
  height: 38px;
}

.mytree /deep/.el-tree > .el-tree-node:before {
  border-left: none;
}

.mytree /deep/.el-tree > .el-tree-node:after {
  border-top: none;
}

.mytree /deep/.el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.mytree /deep/.el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.mytree /deep/.el-tree-node:before {
  border-left: 1px dashed #c7c7c7;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.mytree /deep/.el-tree-node:after {
  border-top: 1px dashed #c7c7c7;
  height: 20px;
  top: 12px;
  width: 24px;
}
.mytree /deep/ .el-tree-node__expand-icon {
  display: none;
}
</style>
<style>
.el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(1, 79, 222, 0.3) !important;
  /* color: #fff; */
}
</style>